<template>
    <div>
        <div style="margin-bottom: 10px;display: flex;margin-left: 10px;">

            <span style="margin-top:4px ;color: #808080;font-size: 16px;align:center">姓名:</span>
            <el-input v-model="queryCondition.name" placeholder="请输入姓名" style="width:240px;margin-left:5px ;"></el-input>



            <el-button type="primary" style="width: 80px;margin-left: 9px;" @click="toQuery">查询</el-button>


            <el-button style="width: 80px;" @click="addUserInfo">新增</el-button>
        </div>
        <!--表格部分-->
        <div>
            <el-table :data="tableData" style="width: 100%" ref="table">
                <el-table-column prop="name" label="姓名">
                </el-table-column>
                <el-table-column prop="sex" label="性别">
                    <template slot-scope="scope">
                        {{ scope.row.sex === '1' ? '男' : '女' }}
                    </template>
                </el-table-column>
                <el-table-column prop="phone" label="手机号码">
                </el-table-column>
                <el-table-column prop="age" label="年龄">
                </el-table-column>
                <el-table-column prop="age" label="角色">
                    <template slot-scope="scope">
                        {{ scope.row.role==='ROLE_TEACHER'?'老师':'学生' }}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="editUserinfo(scope.row)">编辑</el-button>
                        <el-button type="danger" @click="deleteUserInfo(scope.row.id)">删除</el-button>
                    </template>

                </el-table-column>
            </el-table>
        </div>
        <!--分页部分-->
        <div style="margin-top: 10px;">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                :page-sizes="[5, 10, 15, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        <!--新增、编辑弹出框-->
        <el-dialog title="新增用户信息" :visible.sync="addUserDialog" v-if="addUserDialog" width="40%" @close="addUserClose">
            <template slot="footer">
                <span class="dialog-footer">
                    <el-button type="primary" @click="saveUserInfo">保存</el-button>
                    <el-button @click="reset">重置</el-button>
                </span>
            </template>
            <el-form ref="addUserInfoForm" :model="addUserInfos" :rules="rules" label-width="70px" size="mini">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="姓名:" prop="name" required>
                            <el-input v-model="addUserInfos.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="密码:" prop="password" required>
                            <el-input v-model="addUserInfos.password"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>

                    <el-col :span="12">
                        <el-form-item label="性别:" prop="sex">

                            <el-radio v-model="addUserInfos.sex" label="1">男</el-radio>
                            <el-radio v-model="addUserInfos.sex" label="0">女</el-radio>



                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="年龄:" prop="age">
                            <el-input v-model="addUserInfos.age"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>

                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="手机号:" prop="phone" required>
                            <el-input v-model="addUserInfos.phone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="角色:" prop="role" required>
                            <el-select v-model="addUserInfos.role" placeholder="请选择角色">
                                <el-option
                                v-for="item in roleTypes"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import { queryUserInfo, saveUserInf, deleteUserInf } from '@/api/userApi.js'
export default {
    name: 'AdminInfo',
    props: {

    },
    components: {

    },
    data() {
        return {
            rules: {
                name: [
                    { required: true, message: '用户名不能为空', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '密码不能为空', trigger: 'blur' }
                ],
                phone:[
                    {required:true,message:'手机号不能为空',trigger:'blur'}
                ]
            },
            addUserInfos: {
                name: '',
                password: '',
                age: null,
                sex: '1',
                phone: '',
                role:''
            },
            //新增用户信息弹出框标志
            addUserDialog: false,
            //每页大小
            pageSize: 5,
            //当前页码
            currentPage: 1,
            //总记录数
            total: 0,
            //查询条件
            queryCondition: {
                name: ''
            },
            //表格数据
            tableData: [],
            mulitpList:[],
            //选中选项的id
            selectItemId:[],
            roleTypes:[
                {label:'老师',value:'ROLE_TEACHER'},
                {label:'学生',value:'ROLE_STUDENT'}
            ]
        }
    },
    methods: {
        //选中改变时触发该事件11111
        selectChange(selection){
            console.log("选中的对象:::::",selection);

            // 对 selection 进行去重，假设根据 id 属性去重
            const uniqueSelection = Array.from(new Set(selection.map(item => item.id)))
                .map(id => selection.find(item => item.id === id));

            this.mulitpList = uniqueSelection; // 将去重后的结果赋值给 mulitpList
            console.log("选中的集合:::::",this.mulitpList);
            // this.selectItemId = Array.from(new Set(this.mulitpList.map(item => item.id)));
            const newSelectedIds = selection.map(item => item.id);
    
            // 更新 selectedRowIds，去重
            this.selectItemId = Array.from(new Set([...this.selectItemId, ...newSelectedIds]));
            console.log("选中的选项id集合",this.selectItemId);
        },
        //删除用户信息
        deleteUserInfo(val) {
            console.log("删除的信息:", val);
            this.$confirm("确定要删除吗?").then(() => {
                deleteUserInf(val).then((res) => {
                    if (res.code === '0') {
                        this.$message.success("删除成功")
                        this.toQuery()
                    }
                }).catch(error => {
                    this.$message.error("删除失败！", error)
                })
            })

        },
        //编辑用户信息
        editUserinfo(value) {
            this.addUserDialog = true
            this.addUserInfos = value
        },
        //新增用户信息
        addUserInfo() {
            this.addUserDialog = true
        },
        //每页大小切换时触发该事件
        handleSizeChange(val) {
            console.log("页大小:", val);
            this.pageSize = val
            this.toQuery()
        },
        //当前页发生变化时触发该事件
        handleCurrentChange(val) {
            console.log("当前页", val);
            this.currentPage = val
            this.toQuery()
        },
        //点击查询触发该事件
        toQuery() {
            queryUserInfo(this.queryCondition, this.currentPage, this.pageSize).then((res) => {
                if (res) {
                    this.tableData = res.data.list
                    this.total = res.data.total
                    this.$nextTick(()=>{
                        this.tableData.forEach((item)=>{
                            if(this.selectItemId.includes(item.id)){
                                this.$refs.table.toggleRowSelection(item,true)
                            }
                        })
                    })
                }
            }).catch((error) => {
                this.$message.error("查询用户信息失败！", error)
            })
        },
        //保存用户信息
        saveUserInfo() {
            console.log("获取表单标识", this.$refs);
            this.$refs.addUserInfoForm.validate((vaild) => {
                console.log("校验结果:::::", vaild);
                if (vaild) {
                    saveUserInf(this.addUserInfos).then((res) => {
                        if (res.code === '0') {
                            this.$message.success("保存成功")
                            this.addUserDialog = false
                            this.addUserInfos = {}
                            this.toQuery()
                        }else{
                            this.$message.error(res.msg)
                        }

                    }).catch((error) => {
                        this.$message.error("保存用户信息失败！", error)
                    })
                } else {
                    return false
                }
            })


        },
        //重置
        reset() {
            this.addUserInfos = {}
        },
        //关闭弹出框
        addUserClose() {
            this.addUserDialog = false
            this.addUserInfos = {}
        }
    },
    created() {
        this.toQuery()
    },
    watch: {

    }
}
</script>
<style scoped>
/* 可以添加一些CSS来调整布局 */
.dialog-footer {
    text-align: right;
}
</style>